<script setup>
import { ref, reactive } from "vue";
import { getBannerList, addBanner, delBanner, editBanner } from "@/api/banner";
import { Plus } from "@element-plus/icons-vue"
import { uploadImg } from "@/utils/index"

const queryParam = reactive({
})
const formRef = ref()
const formData = reactive({
  uri: "",
  sort:NaN,
  link: "",
  id:0,
  loading:false
})
const rules = reactive({
  uri: [{ required: true, message: "请上传图片", trigger: "blur" }],
  link: [{ required: true, message: "请输入链接", trigger: "blur" }],
  sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
});
const dialogConfig = reactive({
  show: false,
  type: "add",
  title: "添加banner",
});
const data = ref([]);
getList()
async function getList() {
  const res = await getBannerList()
  data.value = res.data
  console.log(res.data)
}
async function del(id) {
  formData.loading = true;
  const res = await delBanner({ id })
  formData.loading = false;
  getList()
}
function add() {
  dialogConfig.type = "add"
  dialogConfig.title = "添加banner"
  dialogConfig.show = true
  formData.uri = ""
  formData.link = ""
  formData.sort = ""
}
function clickUploadImg() {
  uploadImg((e) => {
    formData.uri = e.data.uri
  })
}
async function submitForm(formEl) {
  if (!formEl) return;
  await formEl.validate(async(valid, fields) => {
    if (valid) {

      formData.loading = true;
      const fn = dialogConfig.type == "add" ? addBanner : editBanner
      const res = await fn(formData)
      formData.loading = false;
      dialogConfig.show = false
      getList()
    }
  });
}
function editBannerFn(data){
  formData.uri = data.uri
  formData.link = data.link
  formData.sort = data.sort;
  formData.id = data.id;
  dialogConfig.type = "edit"
  dialogConfig.title = "编辑banner"
  dialogConfig.show = true
}
</script>

<template>
  <div class="container">
    <div class="box">
      <p class="title">BANNER图</p>
      <div class="flex w-full">
        <div class="preview">
          <p class="text-center">小程序banner效果预览</p>
          <el-carousel class="mt-4" style="border-radius: 10px;overflow:hidden;" height="150px" arrow="never">
            <el-carousel-item v-for="item in data" :key="item.id">
              <img :src="item.uri" alt="" style="height: 100%;width: 100%">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="tool w-full ml-2">
          <div>
            <el-button type="primary" @click="add">添加</el-button>
          </div>
          <el-table :data="data" style="width: 100%">
            <el-table-column label="图片" width="150">
              <template #default="scope">
                <el-image fit="fill" preview-teleported style="width: 100px;height:100px;"
                  :preview-src-list="[scope.row.uri]" :src="scope.row.uri"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="链接" prop="link"  width="200" />
            <el-table-column label="操作">
              <template #default="scope" width="150">
                <el-button :loading="formData.loading" type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                <el-button type="primary" size="mini" @click="editBannerFn(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogConfig.show" :title="dialogConfig.title" width="500">
    <el-form  
      ref="formRef"         
      :model="formData"
      :rules="rules"
      status-icon
    >
      <el-form-item prop="uri" label="图片">
        <el-image v-if="formData.uri" class="uploadimg mr-1" style="width: 90px; height: 90px" :src="formData.uri" fit="cover" />
        <div class="uploadimg" @click="clickUploadImg()">
          <el-icon class="icon">
            <Plus />
          </el-icon>
        </div>
      </el-form-item>
      <el-form-item label="链接" prop="link">
        <el-input v-model="formData.link"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" type="number"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="formData.loading" type="primary" @click="submitForm(formRef)">提交</el-button>
      </el-form-item>
    </el-form>
    
  </el-dialog>
</template>

<style scoped>
.preview {
  height: 736px;
  width: 414px;
  min-height: 736px;
  min-width: 414px;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.tool{
  width: calc(100% - 414px - 40px);
}
</style>